<template>
   <div>
     <van-nav-bar title="更多医生" left-arrow @click-left="onClickLeft">
    <template #right>
      <van-icon name="weapp-nav" size="18" />
    </template>
  </van-nav-bar>
  <div class="gdys">
    <van-search v-model="value" placeholder="搜索医生、医院或疾病症状" />
    <div class="top">
      <div class="title">热门科室</div>
      <div class="ke" v-for="(item, index) in items" :key="index" >
        <span
        :class="{ 'active': activeTab === index }"
        @click="switchTab(index)"
        >{{ item }}</span>
      </div>
      <div class="tab">
        <!-- 改为新的右边数据 -->
        <span @click="handleEk">{{youx}}<van-icon size="0.2rem" name="arrow-down" /></span>
        <span @click="handleQg"> {{ acity }}<van-icon size="0.2rem" name="arrow-down" /></span>
        <span @click="handlePx">默认排序<van-icon size="0.2rem" name="arrow-down" /></span>
      </div>
      <!-- 儿科弹框 -->
    </div>
    <div class="com">
      <DoctorCard :xiny="youx" :acity="acity" :address="address"></DoctorCard>
    </div>
  </div>
   </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
// 引入自定义封装组件的医生卡片
import DoctorCard from "@/components/DoctorCard/index.vue";
import { ref } from "vue";
const activeTab = ref(1);
const onClickLeft=()=>{
  router.push('/')
}
// 定义搜索框的值
const value = ref("");
// 点击弹框
const router=useRouter()
const handleEk=()=>{
  router.push('/ekk')
}
const handleQg=()=>{
  router.push('/qgk')
}
const handlePx=()=>{
  router.push('/pxk')
}
const route = useRoute()
const acity = ref("全国"); 
const city = route.query.shi
if(typeof city == "string" ){
  acity.value = city
}
const address = route.query.sheng
if(acity.value == ""){
acity.value = '全国'
}
const zuo = route.query.leftText
const you = route.query.rightText
 let youx = ref("儿科");
if (typeof you ==='string') {
    // 正常赋值给 youx.value 等相关逻辑
    youx.value = you;
}

// 初始数据
const switchTab = (index: number) => {
   activeTab.value = index;
};

const items = [
  '妇产科',
  '儿科',
  '皮肤科',
  '消化内科',
  '中医科',
  '呼吸内科',
  '耳鼻喉科',
  '肿瘤科',
]
    
const list = ref([])

</script>

<style scoped lang="scss">
.gdys {
  width: 100%;
  height: 93%;
  background-color: #f2f2f2;
  font-size: 0.3rem;

  .top {
    width: 100%;
    height: 180px;
    background-color: #fff;

    .title {
      width: 100px;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      font-size: 0.35rem;
      font-weight: bolder;
    }
    
    
    .ke {
      width: 1.7rem;
      height: 1.2rem;
      float: left;
      margin-left: 0.1rem;
      .active{
      background-color: rgb(88, 164, 214);
      color: #fff;
    }
      span {
        display: block;
        width: 100%;
        height: .7rem;
        border-radius: 15px;
        background-color: #f0f5fd;
        color: rgb(0, 119, 255);
        text-align: center;
        line-height: .7rem;
      }
    }

    .tab {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 0.35rem;
      margin-top: 10px;

      span {
        display: flex;
        align-items: center;
      }
    }
  }

  .com {
    width: 95%;
    margin-left: 2.5%;
    background-color: #fff;
    margin-top: 10px;
  }
}
</style>
